/*
 * @Author: chenwei
 * @Date: 2022-02-17 17:08:38
 * @LastEditors: chenwei
 * @LastEditTime: 2022-02-17 17:31:14
 * @FilePath: \React\react-demo\7 列表和key.jsx
 * @Description:
 *
 */

// 1.0 尝试列表渲染
const list = [1, 2, 3, 4, 5, 6];
const listItem = list.map((item) => {
  return <li>{item}</li>;
});
ReactDOM.render(<ul>{listItem}</ul>, document.getElementById("root"));

// 2.0 封装列表组件
function NumbersList(props) {
  const numberList = props.numberList;
  const list = numberList.map((item) => {
    return <li key={String(item)}>{item}</li>; // 循环中的key必须要放到循环的元素中
  });
  return <ul>{list}</ul>;
}
const numbers = [0, 2, 3, 6, 9, 8, 5];
ReactDOM.render(
  <NumbersList numberList={numbers} />,
  document.getElementById("root")
);
